<template>
  <div class="search_set_container">
    <div class="search_set_content">
      <a-tabs default-active-key="1">
        <a-tab-pane key="1" tab="内容设置">
          <div class="module_content_set">
            <div class="set_title">功能设置</div>
            <div class="set_list">
              <div class="set_item">
                <div class="set_label">预设内容</div>
                <div class="set_radio">
                  <a-input v-model="placeholder" />
                </div>
              </div>
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="样式设置">
          <div class="module_content_set">
            <div class="set_title">内容样式</div>
            <div class="set_list">
              <div class="set_item">
                <div class="set_label">框体样式</div>
                <div class="set_radio">
                  <a-radio-group v-model="borderRadius" button-style="solid">
                    <a-radio-button value="0px"> 方角 </a-radio-button>
                    <a-radio-button value="35px"> 圆角 </a-radio-button>
                  </a-radio-group>
                </div>
              </div>
              <div class="set_item">
                <div class="set_label">文本位置</div>
                <div class="set_radio">
                  <a-radio-group v-model="textAlign" button-style="solid">
                    <a-radio-button value="left"> 居左 </a-radio-button>
                    <a-radio-button value="center"> 居中 </a-radio-button>
                  </a-radio-group>
                </div>
              </div>
            </div>
          </div>
          <div class="module_content_set">
            <div class="set_title">组件样式</div>
            <div class="set_list">
              <div class="set_item">
                <div class="set_label">上边距</div>
                <div class="set_radio">
                  <a-radio-group v-model="marginTop" button-style="solid">
                    <a-radio-button value="0px"> 小 </a-radio-button>
                    <a-radio-button value="15px"> 中 </a-radio-button>
                    <a-radio-button value="30px"> 大 </a-radio-button>
                  </a-radio-group>
                </div>
              </div>
              <div class="set_item">
                <div class="set_label">下边距</div>
                <div class="set_radio">
                  <a-radio-group v-model="marginBottom" button-style="solid">
                    <a-radio-button value="0px"> 小 </a-radio-button>
                    <a-radio-button value="15px"> 中 </a-radio-button>
                    <a-radio-button value="30px"> 大 </a-radio-button>
                  </a-radio-group>
                </div>
              </div>
            </div>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
  props: ["id", "contentSetting", "styleSetting"],
  data() {
    let data = {};
    this.initContentProps(data);
    this.initStyleProps(data);
    return {
      ...data,
    };
  },
  watch: {
    // 相同组件时切换对应组件的数据
    activeComponent(newComponent, oldVal) {
      if (oldVal && newComponent && oldVal !== newComponent) {
        // this.initProps(this);
        this.initContentProps(this);
        this.initStyleProps(this);
      }
    },
    placeholder(newVal) {
      this.setComponentProps({
        id: this.id,
        node: "contentSetting",
        name: "placeholder",
        value: newVal,
      });
    },
    borderRadius(newRadius) {
      this.setComponentProps({
        id: this.id,
        node: "styleSetting",
        name: "borderRadius",
        value: newRadius,
      });
    },
    marginTop(newVal) {
      this.setComponentProps({
        id: this.id,
        node: "styleSetting",
        name: "marginTop",
        value: newVal,
      });
    },
    marginBottom(newBottom) {
      this.setComponentProps({
        id: this.id,
        node: "styleSetting",
        name: "marginBottom",
        value: newBottom,
      });
    },
    textAlign(newVal) {
      this.setComponentProps({
        id: this.id,
        node: "styleSetting", 
        name: "textAlign",
        value: newVal,
      });
    },
  },
  methods: {
    initProps(props) {
      // console.log("==>", props);
    },
    initStyleProps(data) {
      if (this.styleSetting) {
        data.borderRadius = this.styleSetting.borderRadius || "0px";
        data.marginTop = this.styleSetting.marginTop || "0px";
        data.marginBottom = this.styleSetting.marginBottom || "0px";
        data.textAlign = this.styleSetting.textAlign || "left";
      } else {
        data.borderRadius = "0px";
        data.marginTop = "0px";
        data.marginBottom = "0px";
        data.textAlign = "left";
      }
    },
    initContentProps(data) {
      if (this.contentSetting) {
        data.placeholder = this.contentSetting.placeholder;
      } else {
        data.placeholder = "请输入搜索内容";
      }
    },
    ...mapMutations(["setComponentProps"]),
  },
  computed: {
    ...mapState({
      activeComponent: (state) => state.activeComponent,
    }),
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>


</style>